

<template>
    <div class="home-layout main-layout">
        <div class="top-pics">
          <img class="logo" src="../../base/images/LOGO_home@2x.png" alt="">
          <img class="title" src="../../base/images/title@2x.png" alt="">
        </div>
        <div class="home-layout-title">
            <img v-bind:src="titleSrc" />
        </div>
        <div class="home-layout-content">
            <div class="home-layout-banner md-font hide">
                当前参与人数:{{participants}}
            </div>
            <div class="home-layout-avandor flex flex-horizontal-center flex-vertical-center hide">
                <div class="avandor-list">
                    <div v-for="item in participantsArray">
                        <img v-bind:src="item.src"/>
                    </div>
                </div>
                <img v-bind:src="avandorSrc" />
            </div>
            <div class="home-layout-man">
              <img src="./images/qrw@2x.png" alt="">
            </div>
            <div class="home-layout-buttons">
                <button class="main" v-on:click="clearSession">开始答题</button>
                <button class="main"><router-link to="/personal-center">个人中心</router-link></button>
                <div class="md-font home-layout-rules" style="padding-top: 10px">
                    <router-link to="/activity-rules">活动规则</router-link>
                </div>
            </div>
            <div class="md-font home-layout-rules hide">
                <router-link to="/activity-rules">活动规则</router-link>
            </div>
        </div>
        <div class="bottom-logos">
            <img src="../../base/images/bottom_logo@2x.png" alt="">
        </div>

    </div>
</template>
<script>
  var titleImg=require('pages/home/images/lai@2x.png');
  var avandorImg=require('base/images/avandor.png');
  module.exports={
      data:function(){
          return {
              titleSrc:titleImg,
              participants:500,
              avandorSrc:avandorImg,
              participantsArray:[]
          }
      },

      created:function() {

      },
      methods: {
          clearSession:function () {
              var _this = this;
              $.post("/wx/clearCache",{},function (data) {
                  //跳转
                  _this.$router.push("questions-page");
              },"json");
          }
      }
  }
</script>
<style lang="less">
    .home-layout{


        .home-layout-title{
            padding-top:8vh;
            text-align: center;
            img{
                width:72.5vw;
            }
        }
        .home-layout-content{
            margin-top:10vh;
            .home-layout-banner{
                width:50%;
                margin:0 auto;
                text-align: center;
                background-image: url("../../base/images/banner.png");
                background-repeat: no-repeat;
                background-size: 100%;
                color:white;
                padding:20px 20px 30px 20px;
                background-position: center;
            }

            .home-layout-avandor{
                width:80vw;
                margin: 10px auto;
                height:40vw;
                background-size: cover;
                position: relative;
                background-color: rgba(95,181,126,1);
                img{
                    width:90px;
                    position: relative;
                    z-index: 2;
                }
                .avandor-list{
                    width:76vw;
                    height:36vw;
                    position: absolute;
                    left:2vw;
                    top:2vw;
                    display: none;
                }
                .avandor-list>div{
                    width:7.6vw;
                    height:6vw;
                    float: left;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width:5vw;
                        height:5vw;
                        max-width:20px;
                        max-height: 20px;
                    }
                }
            }
            .home-layout-buttons{
                
                margin:-10px auto 0;
                position: relative;
                z-index: 2;

            }
            .home-layout-rules{
                padding-bottom: 2vw;
                text-align: center;
                color:white;
                a{
                    color:white;
                }
            }

        }
    }

    .home-layout-man{
      text-align: center;
      img{
        width: 86.4vw;

      }
    }

</style>